<template>
<div class="food-classes">
    <Scroll :height="fullHeight" loading-text="hi">
        <div class="food-class" v-for="(item, index) in list" :key="index">
            <div :style="'background-image:' + 'url(' + item.img_url + ')'" class="child-img " @click="toStoreInfo(item.store_code)">
                <div class="txt-control mark">
                <div class="theme-txt">
                    <p class="theme-title">{{item.store_name}}</p>
                    <p class="theme-place">{{item.property_name}}铺</p>
                </div>
                </div>
            </div>

        </div>
    </Scroll>
</div>
</template>

<script>
export default {
  name: 'foodClass',
  props: {
    list: {}
  },
  beforeMount () {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    // 减去页面上固定高度height
    this.fullHeight = h - 60
  },
  methods: {
    toStoreInfo (code) {
      this.$emit('toStoreInfo',code)
    }
  },
  data () {
    return {
      fullHeight: 0
    }
  }
}
</script>

<style>
    .food-classes{
        width: 100%;
        height: 100%;
        padding: 1%;
    }
    .food-class{
        width: 47%;
        height: 120px;
        float: left;
        margin: 1.5%;
    }
    .child-img{
        width: 100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        border-radius: 5px;
    }
    .txt-control{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mark{
        width: 100%;
        height: 120px;
        float: left;
        margin: 0;
        position: relative;
        z-index: 1;
        background: rgba(66,66,66,.2);
        border-radius: 3px;
    }
    .theme-txt{
        z-index: 2;
        width: 80%;
        height: 70%;
        color: #fff;
        border: 3px solid #fff;
        padding: 2% 4%;
        position: relative;
        font-weight: bold;
    }
    .theme-title{
        width: 70%;
        font-size: 14px;
        /*font-weight: bold;*/
        text-align: left;
    }
    .theme-place{
        position: absolute;
        bottom: 0;
        right: 4%;
    }
    .ivu-scroll-loader{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
